<template>
  <div class="dashboard-container page-container">
    <el-scrollbar class="scroll-container">
      <!-- 标题 -->
      <div class="page_title">{{pageTitle}}</div>
      <!-- 统计栏 -->
      <div class="total_box">
        <template v-for="(item,index) in totalData">
          <div class="content-container total_box_inner commonBorderStyle" :key="index">
            <div class="content-container-title">
              <span v-if="item.key!='zc'">{{searchName}}-</span>
              <span v-else>总</span>
              <span>{{item.name}}</span>
            </div>
            <div class="total_num_box">
              <div :class="['left',{'onlyLeft':!item.dayCount&&item.dayCount!=0}]">
                <span class="label">总量</span>
                <span class="value">{{item.count}}</span>
              </div>
              <div class="right" v-if="item.dayCount||item.dayCount==0">
                <span class="label">日量</span>
                <span class="value">{{item.dayCount}}</span>
              </div>
            </div>
            <div class="line_box line_box1"></div>
            <div class="line_box line_box2"></div>
            <div class="line_box line_box3"></div>
            <div class="line_box line_box4"></div>
          </div>
        </template>
      </div>
      <!-- 内容 -->
      <div class="data-show-container">
        <!-- 用卡量/注册量echart统计 -->
        <div class="amount-container content-container commonBorderStyle">
          <div class="content-container-title">{{searchName}}-用卡量/注册量(最近{{dayNum}}天)</div>
          <div class="line_box line_box1"></div>
          <div class="line_box line_box2"></div>
          <div class="line_box line_box3"></div>
          <div class="line_box line_box4"></div>
          <div
            class="echart-data"
            v-loading="loading1"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
          >
            <!-- 量组件 -->
            <EchartData ref="EchartData" />
          </div>
        </div>
        <!-- 地图 -->
        <div class="Map-container content-container commonBorderStyle">
          <div class="content-container-title">
            <span
              :class="['btn commonHover',{'btn-selected':searchKey===allArea}]"
              @click.stop="searchCity(allArea,'达州市')"
              title="点击查询全部达州市的数据"
            >全市</span>
            <span>/</span>
            <span
              :class="['btn commonHover',{'btn-selected':searchKey===dzArea}]"
              @click.stop="searchCity(dzArea,'市本级')"
              :title="'市本级-用卡量：'+DZCards"
            >市本级</span>
          </div>
          <div class="line_box line_box1"></div>
          <div class="line_box line_box2"></div>
          <div class="line_box line_box3"></div>
          <div class="line_box line_box4"></div>
          <div
            class="echart-map"
            v-loading="loading2"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
          >
            <!-- 地图组件 -->
            <EchartMap ref="EchartMap" @clickMap="clickMap" />
          </div>
        </div>
        <!-- 表格数据 -->
        <div class="amount-container table-container content-container commonBorderStyle">
          <div class="content-container-title">
            <span v-if="show">{{searchName}}-</span>
            <span
              :class="['btn commonHover',{'btn-selected':show}]"
              @click.stop="show=true"
              title="点击切换到用卡情况"
            >用卡情况</span>
            <span>/</span>
            <span
              :class="['btn commonHover',{'btn-selected':!show}]"
              @click.stop="show=false"
              title="点击切换到用户事件"
            >用户事件</span>
          </div>
          <div class="line_box line_box1"></div>
          <div class="line_box line_box2"></div>
          <div class="line_box line_box3"></div>
          <div class="line_box line_box4"></div>
          <div v-if="show" class="tableContent tableContent1">
            <!-- 用卡量 -->
            <div class="tableHead">
              <div class="value">机构名称</div>
              <div class="value">用卡环节</div>
              <div class="value">用卡时间</div>
            </div>
            <!-- 表格内容 -->
            <UseCardTable ref="UseCardTable" />
          </div>
          <div v-if="!show" class="tableContent tableContent2">
            <!-- 用卡量 -->
            <div class="tableHead">
              <div class="value">事件来源</div>
              <div class="value">处理结果</div>
              <div class="value">事情时间</div>
            </div>
            <!-- 表格内容 -->
            <UserRegisterTable ref="UserRegisterTable" />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import EchartMap from "./home/EchartMap";
import EchartData from "./home/EchartData";
import { changeRes } from "@/api/common";
import { getArrary, deepClone } from "@/utils/index";
import UserRegisterTable from "./home/userRegisterTable";
import UseCardTable from "./home/useCardTable";
import { homeData } from "@/api/home";
import store from "@/store";
export default {
  name: "Dashboard",
  components: {
    UseCardTable,
    UserRegisterTable,
    EchartMap,
    EchartData
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      time: -1,
      timeID: null,
      timeId: null,
      show: true,
      dzArea: 1,
      allArea: -1,
      DZCards: 0,
      searchName: "达州市",
      searchKey: -1,
      dayNum: 10,
      pageTitle: "达州电子健康卡管理平台",
      totalData: [
        { name: "机构量", count: "0", key: "jg" },
        { name: "注册量", count: "0", dayCount: "0", key: "zc" },
        { name: "用卡量", count: "0", dayCount: "0", key: "yk" }
      ]
    };
  },
  created() {
    this.search(0);
    this.updateData();
  },
  beforeDestroy() {
    clearInterval(this.timeID);
    clearInterval(this.timeId);
  },
  methods: {
    clickMap(data) {
      this.searchName = data.name;
      this.searchKey = data.key;
      this.search(-1);
      this.reqHomeTable(data.key);
    },
    searchCity(type, name) {
      this.searchName = name;
      this.searchKey = type;
      this.search(type);
      this.reqHomeTable(type);
    },
    reqHomeTable(key) {
      switch (this.show) {
        case true:
          this.$refs.UseCardTable.searchKey = key;
          this.$refs.UseCardTable.init();
          break;
        // case false:
        //   this.$refs.UserRegisterTable.searchKey = key;
        //   this.$refs.UserRegisterTable.init();
        //   break;
      }
    },
    updateData() {
      if (this.timeId) clearInterval(this.timeId);
      this.timeId = setInterval(() => {
        this.search(2);
      }, store.getters["parameter/updateTime"]);
    },
    search(type) {
      this.initHomeData(type).then(data => {
        this.initUserCardAndRegisterEchart(data);
        this.initMapEchart(data);
        this.initPool(data);
      });
    },
    initHomeData(type) {
      this.loading1 = type === 0 || type === -1 ? true : false;
      this.loading2 = type === 0 ? true : false;
      if (type === -1) this.loading2 = false;
      return new Promise((reslove, reject) => {
        homeData({ area: this.searchKey, dayNum: this.dayNum })
          .then(data => {
            let res = changeRes(data);
            this.loading1 = false;
            if (res.status === 0) {
              reslove(res.data);
            }
          })
          .catch(err => {
            this.loading1 = false;
            this.loading2 = false;
          });
      });
    },
    initMapEchart(data) {
      let mapData = deepClone(data.dzMap).map(item => {
        return {
          name: store.getters["parameter/dzMap"].find(
            item2 => item2.value === item.area
          ).name,
          value: item.useCardNum,
          key: item.area
        };
      });
      let dz = mapData.filter(item => item.key === this.dzArea);
      this.DZCards = dz.length > 0 ? dz[0].value : 0;
      this.$nextTick(() => {
        this.$refs.EchartMap.echartsData = mapData;
        this.$refs.EchartMap.initChart();
        this.loading2 = false;
      });
    },
    initUserCardAndRegisterEchart(data) {
      let list = deepClone(data.userCardOneWeeks).map(item => {
        return {
          time: item.start.split(" ")[0],
          value1: item.useCardNum,
          value2: item.registerNum
        };
      });
      this.$nextTick(() => {
        let xData = getArrary(list, "time").map(item => {
          return item.split("-")[1] + "-" + item.split("-")[2];
        });
        this.$refs.EchartData.echartsData = {
          xData: xData,
          yData1: getArrary(list, "value1"),
          yData2: getArrary(list, "value2")
        };
        this.$refs.EchartData.initChart();
      });
    },
    initPool(data) {
      this.totalData.forEach(item => {
        switch (item.key) {
          case "jg":
            item.count = data.orgNum;
            break;
          case "zc":
            item.count = data.registerUserNum;
            item.dayCount = data.registerUserDayNum;
            break;
          case "yk":
            item.count = data.useCardNum;
            item.dayCount = data.useCardDayNum;
            break;
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/page.scss";
$color: rgba(122, 238, 252, 1);
$color2: #0e155e;
$color3: #44a3d8;
$color4: #dfd370;
.commonBorderStyle {
  border: 2px solid $color2;
}
.commonHover {
  cursor: pointer;
  transition: all 0.12s;
  display: inline-block;
  padding: 0 4px;
  border-radius: 1px;
  &:hover {
    background: $color3 !important;
    color: $color !important;
  }
}
.btn-selected {
  color: $color !important;
}
.content-container {
  position: relative;
  .content-container-title {
    color: $color3;
    font-size: 16px;
    position: absolute;
    top: -11px;
    left: 20px;
    height: 20px;
    line-height: 20px;
  }
  .line_box {
    width: 12px;
    height: 12px;
    border: 1px solid $color;
    position: absolute;
  }
  .line_box1 {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 2px;
  }
  .line_box2 {
    top: -2px;
    right: -2px;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: 2px;
  }
  .line_box3 {
    right: -2px;
    bottom: -2px;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: 2px;
  }
  .line_box4 {
    left: -2px;
    bottom: -2px;
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: 2px;
  }
}
.dashboard-container {
  background: url("../assets/images/homeBG.png") no-repeat center center;
  background-size: 102% 100%;
  .scroll-container {
    // 标题
    .page_title {
      height: 50px;
      background: url("../assets/images/homePAGE_title.png") no-repeat center
        center;
      text-align: center;
      line-height: 50px;
      color: $color;
      font-size: 26px;
    }
    //统计栏
    .total_box {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 25px;
      .total_box_inner {
        width: 280px;
        height: 50px;
        margin: 10px 20px;
        .total_num_box {
          font-size: 14px;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 4px;
          .left,
          .right {
            flex-basis: 50%;
            text-align: center;
          }
          .onlyLeft {
            flex-basis: 100%;
          }
          .label {
            color: #fff;
          }
          .value {
            font-size: 18px;
            color: $color4;
            margin-left: 4px;
            vertical-align: middle;
          }
        }
      }
    }
    .data-show-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 30px 30px 0;
      .content-container {
        margin: 0 4px 20px;
        min-width: 300px;
        .echart-map,
        .echart-data {
          width: 100%;
          height: 100%;
        }
      }
      // 量
      .amount-container {
        flex-basis: 30%;
        height: 300px;
      }
      // 地图
      .Map-container {
        flex-basis: 36%;
        height: 300px;
      }
      // 表格数据
      .table-container {
        .tableContent {
          width: 100%;
          height: 100%;
          padding: 14px 10px 10px;
          box-sizing: border-box;
          .tableHead {
            display: flex;
            justify-content: space-between;
            .value {
              width: 33%;
              text-align: center;
              color: #fff;
              font-size: 11px;
              padding: 3px 6px;
            }
          }
        }
      }
    }
  }
}
</style>
